<template>
	<view class="">
		<view class="tabs-box">
			<view class="tab-item" v-for="(item, index) in tabList" :key="index"
				:class="{ active: currentTab === item.index }" @click="switchTab(item)">
				{{ item.name }}
			</view>
		</view>

		<view class="content-box">
			<!-- 赛事瞬间内容 -->
			<view v-if="currentTab === 0" class="tab-content">
				<view class="news-list">
					<view class="news-item" v-for="(item, index) in list" :key="index" @click="goDetail(item.id, item)">
						<view class="news-image">
							<image :src="imageUrl + item.img" mode="aspectFill"></image>
						</view>
						<view class="news-info">
							<view class="news-title">{{ item.title }}</view>
						</view>
					</view>
				</view>
				
				<!-- 分页器 -->
				<view class="pagination-box" v-if="list.length > 0">
					<view class="pagination">
						<view class="page-item" :class="{ disabled: pageDate.pageNum <= 1 }" @click="changePage(pageDate.pageNum - 1)">
							上一页
						</view>
						<view class="page-item" 
							v-for="page in pageNumbers" 
							:key="page" 
							:class="{ active: pageDate.pageNum === page }"
							@click="changePage(page)">
							{{ page }}
						</view>
						<view class="page-item" :class="{ disabled: pageDate.pageNum >= totalPages }" @click="changePage(pageDate.pageNum + 1)">
							下一页
						</view>
					</view>
				</view>
				<view class="t-c" v-else style="color: #999;font-size: 28rpx;margin-top: 40rpx;">
					暂无数据~
				</view>
			</view>

			<!-- 赛事朋友圈内容 -->
			<view v-else-if="currentTab === 1" class="tab-content" style="text-align: center;">
				功能待开放中～
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		getLeagueH5ContestList,
		getSaishituijianApi
	} from '@/api/tournament/index.js'
	export default {
		props: {
			contestId: {
				type: Number | String,
				default: ''
			}
		},
		data() {
			return {
				tabList: [{
					name: '赛事瞬间',
					index: 0
				}, {
					name: '赛事朋友圈',
					index: 1
				}],
				currentTab: 0,
				list: [],
				imageUrl: '',
				pageDate: {
					pageSize: 3,
					pageNum: 1
				},
				total: 0,
				loadingType: '',
				pageType: ''
			}
		},
		created() {
			this.getList(this.contestId)
			this.imageUrl = config.imageUrl
		},
		computed: {
			totalPages() {
				return Math.ceil(this.total / this.pageDate.pageSize)
			},
			pageNumbers() {
				const pages = []
				const maxVisiblePages = 5
				const halfVisible = Math.floor(maxVisiblePages / 2)
				
				let startPage = Math.max(1, this.pageDate.pageNum - halfVisible)
				let endPage = Math.min(this.totalPages, startPage + maxVisiblePages - 1)
				
				if (endPage - startPage + 1 < maxVisiblePages) {
					startPage = Math.max(1, endPage - maxVisiblePages + 1)
				}
				
				for (let i = startPage; i <= endPage; i++) {
					pages.push(i)
				}
				
				return pages
			}
		},
		methods: {
			switchTab(item) {
				this.currentTab = item.index;
				if (this.currentTab === 0) {
					this.pageDate.pageNum = 1
					this.list = []
					this.getList(this.contestId)
				}
			},
			//获取数据
			getList(id) {
				getSaishituijianApi({
					contestId: id,
					type: 1,
					pageSize: this.pageDate.pageSize,
					pageNum: this.pageDate.pageNum,
				}).then(res => {
					this.total = res.total
					this.list = res.rows
				})
			},
			//联赛详情
			goDetail(id, item) {
				window.location.href = item.jumpLink
			},
			//切换页码
			changePage(page) {
				if (page < 1 || page > this.totalPages || page === this.pageDate.pageNum) {
					return
				}
				this.pageDate.pageNum = page
				this.getList(this.contestId)
				// 回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.tabs-box {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;

		.tab-item {
			padding: 20rpx 30rpx;
			margin: 0 20rpx;
			font-size: 28rpx;
			position: relative;

			&.active {
				color: #ff6633;
				font-weight: bold;

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 60%;
					height: 4rpx;
					background-color: #ff6633;
				}
			}
		}
	}

	.content-box {
		margin-top: 30rpx;

		.tab-content {
			min-height: 300rpx;
		}
	}

	.news-list {
		padding: 0 20rpx;
	}

	.news-item {
		display: flex;
		flex-direction: row;
		margin-bottom: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		padding: 30rpx;
	}

	.news-image {
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;

		image {
			border-radius: 16rpx;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.news-info {
		padding: 0 20rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.news-title {
		font-size: 28rpx;
		line-height: 1.4;
	}
	
	/* 分页样式 */
	.pagination-box {
		padding: 20rpx;
		margin-top: 20rpx;
	}
	
	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.page-item {
		padding: 10rpx 20rpx;
		margin: 0 10rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		font-size: 24rpx;
		cursor: pointer;
		
		&.active {
			background-color: #ff6633;
			color: #fff;
			border-color: #ff6633;
		}
		
		&.disabled {
			color: #ccc;
			cursor: not-allowed;
		}
	}
</style>